<template>
  <div class="panel-container home-left-inside">
    <el-tabs v-model="firstTab" type="border-card" class="no-bottom-margin aside-area">
      <el-tab-pane name="componentLib">
        <span slot="label"><i class="el-icon-set-up"/>组件库</span>
        <el-collapse v-model="activeNames" class="widget-collapse" accordion>
          <!--容器组件-->
          <el-collapse-item name="1" title="容器组件">
            <template v-if="!!containers&&!!(containers.length)">
              <Draggable
                  tag="ul"
                  :sort="false"
                  :list="containers"
                  ghost-class="ghost"
                  :move="checkFieldMove"
                  class="comp-wrapper"
                  :clone="handleFieldWidgetClone"
                  :group="{name: 'dragGroup', pull: 'clone', put: false}"
                  @end="onContainerDragEnd"
              >
                <li v-for="(item, index) in containers" :key="index" class="field-widget-item"
                    :title="item.displayName"
                    @dblclick="addFieldByDbClick(item)" title="item.displayName">
                  <div class="comp-wrap">
                    <svg-icon :icon-class="item.icon" class-name="color-svg-icon"/>
                    <span :title="`${i18n2t(`designer.widgetLabel.${item.type}`, `extension.widgetLabel.${item.type}`)}`">
                      {{i18n2t(`designer.widgetLabel.${item.type}`, `extension.widgetLabel.${item.type}`)}}
                    </span>
                  </div>
                </li>
              </Draggable>
            </template>
            <template v-else>
              <el-empty description="暂无组件"></el-empty>
            </template>
          </el-collapse-item>
          <!--业务组件-->
          <el-collapse-item name="2" title="业务组件">
            <template v-if="!!bizFields&&!!(bizFields.length)">
              <Draggable
                  tag="ul"
                  :sort="false"
                  :list="bizFields"
                  ghost-class="ghost"
                  :move="checkFieldMove"
                  class="comp-wrapper"
                  :clone="handleFieldWidgetClone"
                  :group="{name: 'dragGroup', pull: 'clone', put: false}"
              >
                <li v-for="(item, index) in bizFields"
                    :key="index"
                    class="field-widget-item"
                    :title="item.displayName"
                    @dblclick="addFieldByDbClick(item)"
                >
                  <div class="comp-wrap">
                    <svg-icon :icon-class="item.icon" class-name="color-svg-icon"/>
                    <span :title="(item.options.name)">{{ item.title }}</span>
                  </div>
                </li>
              </Draggable>
            </template>
            <template v-else>
              <el-empty description="暂无组件"></el-empty>
            </template>
          </el-collapse-item>
          <!--场景组件-->
          <el-collapse-item name="3" title="场景组件">
            <template v-for="(item, key) in scenesComps(sceneFields)">
              <div class="category-wrapper">
                <el-divider content-position="left">
                  {{ mapperFiles.scenes[key] }}
                  </el-divider>
                <Draggable
                    tag="ul"
                    :sort="false"
                    :list="item"
                    ghost-class="ghost"
                    :move="checkFieldMove"
                    :clone="handleFieldWidgetClone"
                    class="comp-wrapper"
                    :group="{name: 'dragGroup', pull: 'clone', put: false}"
                >
                  <template v-for="(itemInfo) in item">
                    <li
                        class="field-widget-item"
                        :title="itemInfo.displayName"
                        @dblclick="addFieldByDbClick(itemInfo)">
                      <div class="comp-wrap">
                        <svg-icon :icon-class="itemInfo.icon" class-name="color-svg-icon"/>
                        <span :title="(itemInfo.options.name)">{{ itemInfo.title }}</span>
                      </div>
                    </li>
                  </template>
                </Draggable>
              </div>
            </template>
            <Draggable
                v-if="false"
                tag="ul"
                :sort="false"
                :list="sceneFields"
                ghost-class="ghost"
                :move="checkFieldMove"
                :clone="handleFieldWidgetClone"
                :group="{name: 'dragGroup', pull: 'clone', put: false}"
            >
              <template v-for="(item) in sceneFields">
                <!--通用组件-->
                <template v-if="item.devType==='common'">
                  <li
                      class="field-widget-item"
                      :title="item.displayName"
                      @dblclick="addFieldByDbClick(item)">
                    <div class="comp-wrap">
                      <svg-icon :icon-class="item.icon" class-name="color-svg-icon"/>
                      <span :title="(item.options.name)">{{ item.title }}</span>
                    </div>
                  </li>
                </template>

              </template>

            </Draggable>
          </el-collapse-item>
          <el-collapse-item name="4" title="定制组件">
            <template v-if="!!customFields&&!!(customFields.length)">
<!--              <Draggable-->
<!--                  tag="ul"-->
<!--                  :sort="false"-->
<!--                  :list="customFields"-->
<!--                  ghost-class="ghost"-->
<!--                  :move="checkFieldMove"-->
<!--                  class="comp-wrapper"-->
<!--                  :clone="handleFieldWidgetClone"-->
<!--                  :group="{name: 'dragGroup', pull: 'clone', put: false}"-->
<!--                  @end="onContainerDragEnd"-->
<!--              >-->
<!--                <li v-for="(item, index) in customFields" :key="index" class="field-widget-item"-->
<!--                    :title="item.displayName"-->
<!--                    @dblclick="addFieldByDbClick(item)" title="item.displayName">-->
<!--                  <div class="comp-wrap">-->
<!--                    <svg-icon :icon-class="item.icon" class-name="color-svg-icon"/>-->
<!--                    <span :title="`${i18n2t(`designer.widgetLabel.${item.type}`, `extension.widgetLabel.${item.type}`)}`">-->
<!--                      {{i18n2t(`designer.widgetLabel.${item.type}`, `extension.widgetLabel.${item.type}`)}}-->
<!--                    </span>-->
<!--                  </div>-->
<!--                </li>-->
<!--              </Draggable>-->
              <template v-for="(item, key) in scenesComps(customFields)">
                <div class="category-wrapper">
                  <el-divider content-position="left">
                    {{ mapperFiles.scenes[key] }}
                  </el-divider>
                  <Draggable
                      tag="ul"
                      :sort="false"
                      :list="item"
                      ghost-class="ghost"
                      :move="checkFieldMove"
                      :clone="handleFieldWidgetClone"
                      class="comp-wrapper"
                      :group="{name: 'dragGroup', pull: 'clone', put: false}"
                  >
                    <template v-for="(itemInfo) in item">
                      <li
                          class="field-widget-item"
                          :title="itemInfo.displayName"
                          @dblclick="addFieldByDbClick(itemInfo)">
                        <div class="comp-wrap">
                          <svg-icon :icon-class="itemInfo.icon" class-name="color-svg-icon"/>
                          <span :title="(itemInfo.options.name)">{{ itemInfo.title }}</span>
                        </div>
                      </li>
                    </template>
                  </Draggable>
                </div>
              </template>
              <Draggable
                  v-if="false"
                  tag="ul"
                  :sort="false"
                  :list="sceneFields"
                  ghost-class="ghost"
                  :move="checkFieldMove"
                  :clone="handleFieldWidgetClone"
                  :group="{name: 'dragGroup', pull: 'clone', put: false}"
              >
                <template v-for="(item) in sceneFields">
                  <!--通用组件-->
                  <template v-if="item.devType==='common'">
                    <li
                        class="field-widget-item"
                        :title="item.displayName"
                        @dblclick="addFieldByDbClick(item)">
                      <div class="comp-wrap">
                        <svg-icon :icon-class="item.icon" class-name="color-svg-icon"/>
                        <span :title="(item.options.name)">{{ item.title }}</span>
                      </div>
                    </li>
                  </template>

                </template>

              </Draggable>
            </template>
            <template v-else>
              <el-empty description="暂无组件"></el-empty>
            </template>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import i18n from "@/utils/vue-i18n/i18n"
import axios from "axios"
import Draggable from "vuedraggable"
import mapperFiles from "@/utils/mapperFiles";
import SvgIcon from "@/components/public/svg-icon"
// 导入组件
import {containers,bizFields, customFields, sceneFields} from "@c/public/form-designer/widgetsConfig"
export default {
  name: "HomeLeft",
  mixins: [i18n],
  components: {
    SvgIcon,
    Draggable,
  },
  props: {
    designer: Object,
  },

  inject: ['getBannedWidgets', 'getDesignerConfig'],

  data() {
    return {
      designerConfig: this.getDesignerConfig(),

      firstTab: 'componentLib',

      scrollerHeight: 0,

      activeNames: ['3'],

      containers,

      customFields,

      bizFields,

      sceneFields,

      mapperFiles,
    }
  },

  computed: {
    // 分类业务组件
    scenesComps() {
      return function (params) {
        let comps = this.$lodash.cloneDeep(params);
        return comps.reduce((result, item) => {
          if(item.shown){
            const key = (item.devType);
            if (!result[key]) {
              result[key] = []
            }
            result[key].push(item);
          }
          return result;
        }, {})
      };

    }
  },

  mounted() {
    this.loadWidgets()
  },
  methods: {
    isBanned(wName) {
      return this.getBannedWidgets().indexOf(wName) > -1
    },

    // 加载组件的相关信息
    loadWidgets() {
      // 容器组件
      this.containers = this.containers.map(item => {
        return {
          ...item,
          displayName: this.i18n2t(`designer.widgetLabel.${item.type}`, `extension.widgetLabel.${item.type}`)
        }
      }).filter(fld => {
        return !fld.internal &!this.isBanned(fld.type)
      })

      // 业务组件
      this.bizFields = this.bizFields.map(item => {
        return {
          ...item,
          displayName: item.title
        }
      }).filter(fld => {
        return !this.isBanned(fld.type)
      })

      // 场景组件
      this.sceneFields = this.sceneFields.map(item => {
        return {
          ...item,
          displayName: item.title
        }
      }).filter(fld => {
        return !this.isBanned(fld.type)
      })

    //  定制组件customFields
      this.customFields = this.customFields.map(item => {
        return {
          ...item,
          displayName: item.title
        }
      }).filter(fld => {
        return !this.isBanned(fld.type)
      })

    },

    // 拷贝组件到视图
    handleFieldWidgetClone(origin) {
      return this.designer.copyNewFieldWidget(origin)
    },

    // 容器组件移动到画布
    checkContainerMove(evt) {
      return this.designer.checkWidgetMove(evt)
    },

    // 非容器组件移动到画布
    checkFieldMove(evt) {
      return this.designer.checkFieldMove(evt)
    },

    // 容器组件点击到画布
    addContainerByDbClick(container) {
      this.designer.addContainerByDbClick(container)
    },

    // 业务组件的点击到画布
    addFieldByDbClick(widget) {
      this.designer.addFieldByDbClick(widget)
    },

    // 展示图片预览
    showFormTemplates() {
      if (this.designerConfig['formTemplates'] === undefined) {
        return true
      }
      return !!this.designerConfig['formTemplates']
    },

    // 容器组件拷贝
    handleContainerWidgetClone(origin) {
      return this.designer.copyNewContainerWidget(origin)
    },

    onContainerDragEnd(evt) {
      //console.log('Drag end of container: ')
      // console.log(evt)
    },

    loadFormTemplate(jsonUrl) {
      this.$confirm(this.i18nt('designer.hint.loadFormTemplateHint'), this.i18nt('render.hint.prompt'), {
        confirmButtonText: this.i18nt('render.hint.confirm'),
        cancelButtonText: this.i18nt('render.hint.cancel')
      }).then(() => {
        axios.get(jsonUrl).then(res => {
          let modifiedFlag = false
          if (typeof res.data === 'string') {
            modifiedFlag = this.designer.loadFormJson(JSON.parse(res.data))
          } else if (res.data.constructor === Object) {
            modifiedFlag = this.designer.loadFormJson(res.data)
          }
          if (modifiedFlag) {
            this.designer.emitHistoryChange()
          }

          this.$message.success(this.i18nt('designer.hint.loadFormTemplateSuccess'))
        }).catch(error => {
          this.$message.error(this.i18nt('designer.hint.loadFormTemplateFailed') + ':' + error)
        })
      }).catch(error => {
        console.error(error)
      })
    },

  }

}
</script>

<style lang="scss" scoped>
@import "./assets/style";
</style>
